<template>
  <div class="dy-main InsuranceOrderCancelConfirm">
    <div class="dy-header">
       <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">交易查询</x-header>
    </div>
    <div class="dy-body">
      <div class="topInfo">
        <group gutter="0">
          <cell :title="('产品名称')" :value="RiskName"></cell>
          <cell :title="('保单号')" :value="InsuranceNumber"></cell>
          <cell :title="('投保公司')" :value="InsuranceCompany"></cell>
          <cell :title="('投保日期')" :value="InsuranceData"></cell>
          <cell :title="('保单状态')" :value="InsuranceStt"></cell>
          <cell :title="('购买渠道')" :value="BuyChannel"></cell>
        </group>
      </div>
      <div class="checkMsg">
        <group gutter="0">
          <x-input title="验证码" class="weui-vcode" v-model="userPas" placeholder="请输入验证码" :show-clear="false" :min="6" :max="6" @on-change="testYzm">
            <a slot="right" :class="{blue: !isTime, cry: isTime}" href="javascript:void(0)" @click="postCode">{{ codeText }}</a>
          </x-input>
        </group>
      </div>
      <div @click="OrderCancerConfirm" class="insurance-cancer-btn">确定</div>
      <div  class="warm-prompt">
        <ul>
          <li>温馨提示</li>
          <li>客户仅可以对当日交易进行撤单。</li>
          <li>购买之日起的15个自然日内可向保险公司提出犹豫期撤保。</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userPas: '',
      status: '',
      codeTime: 60, // 验证码倒计时
      codeText: '发送验证码', // 验证按钮显示内容
      RiskName: '',
      InsuranceNumber: '',
      InsuranceCompany: '',
      InsuranceData: '',
      InsuranceStt: '',
      BuyChannel: ''
    }
  },
  methods: {
    // refreshOption () {
    //   let LVm = this
    //   window.WebViewJavascriptBridge.callHandler('nativeRequest',
    //     JSON.stringify({
    //       'requstSource': 'internetRequest',
    //       'url': 'mstep.do?act=business',
    //       'params': {'method_Name': 'InsuranceTradeResult'}
    //     }),
    //     function (response) {
    //       response = JSON.parse(response)
    //       if (response.status === 0 || response.status === '0') {
    //         LVm.financialData = response.data.data[0]
    //         LVm.status = response.status
    //       } else {
    //         console.log('fail')
    //       }
    //     }
    //   )
    // },
    postCode () {
      let lVue = this
      lVue.codeText = (lVue.codeTime + 's后可重新发送')
      if (!lVue.isTime) {
        lVue.isTime = setInterval(() => {
          lVue.codeTime--
          if (lVue.codeTime === 0) {
            lVue.codeText = '发送验证码'
            lVue.disableCode = false
            clearInterval(lVue.isTime)
            lVue.isTime = null
            lVue.codeTime = 10
            return
          }
          lVue.codeText = lVue.codeTime + 's后可重新发送'
        }, 1000)
      }
      lVue.disableCode = true
    },
    OrderCancerConfirm () {
      this.$router.push({name: 'InsuranceQueryResult'})
    },
    getNoteCode () {
      alert('获取短信验证码')
    },
    back () {
      this.$publicFun.goBack(this)
    }
  },
  created () {
    this.RiskName = this.$route.query.RiskName
    this.InsuranceNumber = this.$route.query.InsuranceNumber
    this.InsuranceCompany = this.$route.query.InsuranceCompany
    this.InsuranceData = this.$route.query.InsuranceData
    this.InsuranceStt = this.$route.query.InsuranceStt
    this.BuyChannel = this.$route.query.BuyChannel
    this.status = this.$route.query.status
    // this.refreshOption()
  }
}
</script>

<style lang='less'>
.InsuranceOrderCancelConfirm{
  .dy-body{
    .topInfo{
      padding-top: 0.2rem;
    }
    .checkMsg{
      padding-top: 0.2rem;
    }
    .insurance-cancer-btn{
      width: 6.9rem;
      height: .88rem;
      margin: 0.59rem auto 0.2rem;
      background-color: #EC1B30;
      font-size: .34rem;
      color: #FFFFFF;
      line-height: .88rem;
      text-align: center;
      border-radius: .06rem;
    }
    .warm-prompt ul{
      list-style-type: none;
      font-size: .26rem;
      color: #999999;
      padding-left: .3rem;
      >li{
        margin-top: .16rem;
      }
    }
  }
}
</style>
